<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main {
            width: 100px;
            height: 100px;
            background-color: skyblue;

        }
    </style>
</head>

<body>
    <div class="main">2</div>
    <script>
        // 在上下文对象内使用函数并将其上下文对象切换成另一个变量
        // var obj = {
        //     yes: function () {
        //         // this = obj
        //         this.val = true;
        //     },
        //     no: function () {
        //         this.val = false;
        //     }
        // }
        // console.log(obj.val == null); //true
        // // 我们发现obj没有val属性

        // // 执行了yes函数后,将val属性与'obj'对象关联起来
        // obj.yes();
        // console.log(obj.val == true)
        // // 不过现在把window.no指向obj.val并执行之
        // window.no = obj.no;
        // window.no();
        // // 结果是obj对象的val不变，因为no的上文已经改变为window对象了
        // console.log(obj.val == true);//true
        // // 而window的val属性被更新了
        // console.log(window.val == false); //true


        // 修改this指向
        function changeColor(color) {
            console.log(this); //window
            this.style.color = color;
        }
        // 在window对象中调用此函数会失败，因为window对象没有style属性
        // changeColor('red');
        var main = document.querySelector('.main');
        // 使用call方法将它的颜色设置为黑色，calll方法将上下文对象设置为第一个参数
        // 并将其它的参数作为原函数的参数
        changeColor.call(main, 'red');
        // 设置body元素颜色的函数
        function setBodyColor() {
            // apply方法将上下文对象设置为第一个参数指定的body元素，第二个参数是
            // 传给函数参数的数组
            changeColor.apply(document.body, arguments);
        }
        // 将body背景设置为黑色
        setBodyColor('black');

    </script>
</body>

</html>